﻿<div id="operations" data-bind="widget: 'operations'"></div>

<div style="height: 100%" data-bind="operation: { handler: 'initialize', title: 'Executing Operations... Please Wait...', allowCancel: false, closeOnCompletion: false, anyExceptionIsFatal: true, items: [{ body: operation, title: 'This is a viewmodel indeterminate operation.' }, { body: immediate, title: 'This is a viewmodel immediate operation.' }, { path: 'commands/alert', title: 'This is loaded immediate command operation.' }, { path: 'commands/wait', title: 'This is loaded indeterminate command operation.' }, { body: throwException, title: 'Throwing Exception...' }] }">
	<div style="border: 0; height: 100%;" data-bind="jqxWidget: { type: 'jqxDockPanel' }">
		<div dock='top' class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<a class="brand" data-bind="attr: { href: router.visibleRoutes()[0].hash }">
					<img src="Content/Images/Logo.png" style="max-height: 80px" />
				</a>
				<ul class="nav" data-bind="foreach: router.visibleRoutes">
					<li data-bind="css: { active: isActive }">
						<a data-bind="attr: { href: hash }, html: name"></a>
					</li>
				</ul>
				<div class="loader pull-right" data-bind="css: { active: router.isNavigating }">
					<i class="icon-spinner icon-2x icon-spin"></i>
				</div>
				<form class="navbar-search pull-right" data-bind="submit: search">
					<input type="text" class="search-query" placeholder="Search">
				</form>
			</div>
		</div>

		<div dock="bottom" style="border: 2px solid black; background: lightgrey; margin-left: -2px; font: 8pt verdana">
			<div style="padding: 15px 10px; margin: 0; float: left">
				<a href="mailto:contact@dragonspark.us" style="font-weight: bold">Contact</a>
				|
				<a href="http://dragonspark.codeplex.com" style="font-weight: bold">Source Code</a>
			</div>
			<div style="padding: 15px 10px; margin-right: 10px; float: right;">
				&copy; 2013 DragonSpark Technologies Incorporated.  All rights reserved, bitches.  Version: <a href="#" style="font-weight: bold">2013.11.12.1</a>
			</div>
		</div>

		<div style="overflow-y: auto">
			<div style="padding: 20px">
				<!--ko compose: { 
					model: router.activeItem, //wiring the router
					afterCompose: router.afterCompose, //wiring the router
					transition:'entrance', //use the 'entrance' transition when switching views
					cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
					}-->
				<!--/ko-->
			</div>
		</div>		
	</div>
</div>
